<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue3.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <button @click="fn1">父组件按钮1</button>
    <counter aa='22' @bb="sun_fun"></counter>
  </div>
</template>


<script>
  const { provide } =Vue
  //组件
  const Counter={
    template:`<div>子组件<button @click="s_btn">子组件按钮1</button></div>`,
    setup(props,context){
      let {attrs,emit} =context
      let s_btn=()=>{
        emit('bb')
      }
      return {
        s_btn
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},
  setup(){
    let val="测试"
    let fn1=()=>{
      val="我要改变测额,val没有加ref,所以不能直接改变视图"
      console.log(val)
    }
    //子组件的方法
    let sun_fun=()=>{
      alert("我是子组件给的数据")
    }
 
    return {
      sun_fun,
      val,
      fn1,
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>